<template>
  <div class="text_list_box">
    <el-table
      ref="tableRef"
      :data="tableData"
      height="400"
      max-height="550"
      tooltip-effect="light"
      class="table_box"
      header-row-class-name="table_header_title"
    >
      <el-table-column width="50" align="center">
        <template #default="scope">
          <el-checkbox
            v-model="scope.row.isCheck"
            @change="chooseFile(scope.row)"
          ></el-checkbox>
        </template>
      </el-table-column>
      <el-table-column label="名称" width="400" align="left">
        <template #default="scope">
          <div class="file_box">
            <img class="suffix_icon" src="/static/file/mp3.png" alt="" />
            <span>{{ scope.row?.file_name }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="大小" align="center">
        <template #default="scope">
          <div class="radar_box">
            <span>{{ (scope.row.file_size / 1024 / 1024).toFixed(2) }} M</span>
            <img class="radar_icon" v-if="scope.row?.is_radar==1" src="@/assets/image/material/radar_red.png" alt="">
          </div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script lang="ts" setup>
import { computed, ref, watch } from "vue";
import { ElMessage } from "element-plus";
// const props = defineProps(["baseList", "remainNum",'selectBaseList']);

interface PropsType {
  baseList?: any[],
  selectBaseList?: any[],
  remainNum?: (string | number),
  multiple?: boolean,
  totalNum: number
}
const props = withDefaults(defineProps<PropsType>(), {
  baseList: ()=>[],
  selectBaseList: ()=>[],
  remainNum: 0,
  multiple: true,
  totalNum: 9
})


const emit = defineEmits(["getData"]);
const tableData = computed(() => {
   let arr:any[] = [];
    props.baseList.forEach((item:any)=>{
      item.isCheck = false
      arr.push(item)
    })
    return arr;
});
const chooseFile = (item: any) => {
  let indx = props.selectBaseList.findIndex((it: any) => it.id === item.id);
  if(props.multiple){
    if (indx === -1) {
      if (props.remainNum <= 0) {
        // ElMessage.error(`最多可选${props.selectBaseList.length}个素材`);
        ElMessage.error(`最多可选${props.totalNum}个素材`);
        item.isCheck = false
        return;
      }
      props.selectBaseList.push(item);
    } else {
      props.selectBaseList.splice(indx, 1);
    }
  }else{
    if (indx === -1) {
      props.baseList.forEach(ite=>{
        ite.isCheck = false
      })
      item.isCheck = true
      props.selectBaseList.splice(0)
      props.selectBaseList.push(item)
    } else {
      item.isCheck = false
      props.selectBaseList.splice(0)
    }
  }
  emit("getData", {
    type: 3,
    typeStr: "audio",
    data: props.selectBaseList,
  });
};


</script>
<style lang="scss" scoped>
.text_list_box {
  width: 100%;
  .file_box {
    display: flex;
    align-items: center;
    .suffix_icon {
      width: 40px;
      height: 40px;
      margin-right: 5px;
    }
  }
  .radar_box{
    display: flex;
    font-size: 14px;
    .radar_icon{
      margin-left: 10px;
      width: 20px;
      height: 20px;
    }
  }
}
</style>
<style lang="scss">
.text_list_box {
  .el-table--scrollable-y ::-webkit-scrollbar {
    display: none;
  }
  .table_header_title {
    th.el-table__cell {
      background: #f9f9f9;
      padding: 10px 0;
    }
  }
}
</style>
